<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第三课 的第二个文件</title>
	</head>

	<body>
		<h1 align="center">CSS定位</h1>
		<hr>
		<p>
			<ul>
				<li>无定位Static：<br>流式布局，忽略left、right、top、bottom、z-index等属性</li>
				<li>
					相对定位Relative：<br>生成相对元素，相对于元素本身发生偏移。
					<ol>
						<li>本身占位依然存在</li>
						<li>相对于本身位置进行偏移</li>
					</ol>
				</li>
				<li>
					绝对定位Absolute：<br>生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
					<ol>
						<li>本身位置消失</li>
						<li>相对于非static定位的父级元素定位</li>
					</ol>
				</li>
				<li>固定定位：Fixed</li>
				<li>浮动定位：Float</li>
			</ul>
			
			<br>

		</p>

		<p>演示：</p>

		<div class="box1">
			<div class="box3"></div>
		</div>
		<div class="box2"></div>
		<div class="box4"></div>

		<p>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br>内容填充!<br></p>

		<style>
			.box1, .box2, .box3, .box4 {
				float: left;
				width: 100px;
				height: 100px;
				padding: 10px;
				border: 10px solid #000;
				margin: 10px;
				background: blue;
			}
			.box2 {
				background-color: red;
				position: relative;
				z-index: 9;
			}
			.box3 {
				background-color: green;
			}
			.box4 {
				background-color: yellow;
			}

			/*.box1 {
				position: relative;
				left: 100px;
				top: 100px;
			}*/

			.box1 {
				position: relative;
			}
			.box1 div {
				position: absolute;
				top: 100px;
				left: 100px;
			}
			.box4 {
				position: fixed;
				right: 100px;
				bottom: 100px;
			}
		</style>


	</body>
</html>